{% set show_char_counter = field.widget.template in ('textinput', 'textarea') and
                           field.widget.max_length %}
{% set has_label = not (field.widget.hidden or field.widget.omit_label or
                        field.widget.category == 'structural') %}
{%- if not field.widget.hidden -%}
<div class="form-input
            js-form-input
            {% if field.error %}is-error{% endif %}
            {% if show_char_counter %} js-character-limit {%- endif %}
            {% if field.schema.hide_until_form_active %} is-hidden-when-loading {%- endif %}"
     {%- if field.description-%}
     title="{{ _(field.description) | striptags }}"
     {% endif %}
     {%- if field.schema.hide_until_form_active -%}
     data-hide-until-active="true"
     {% endif %}
     {%- if field.schema.inactive_label -%}
     data-active-label="{{ _(field.title) }}"
     data-inactive-label="{{ _(field.schema.inactive_label) }}"
     {%- endif %}
     id="item-{{ field.oid }}">
{% endif -%}

{%- if has_label -%}
  <label class="form-input__label {% if field.widget.label_css_class %} {{ field.widget.label_css_class }}{% endif %}
                {%- if field.schema.hint -%}js-tooltip{% endif %}"
         {%- if field.schema.hint %}aria-label="{{ field.schema.hint }}"{% endif %}
         {%- if field.description -%}
         title="{{ _(field.description) }}"
         {% endif %}
         for="{{ field.oid }}">
         <span class="{%- if field.schema.inactive_label %}is-hidden-when-loading{% endif %}"
               data-ref="label">{{ _(field.title) }}</span>
    {%- if field.required and field.widget.show_required -%}
      <span class="form-input__required">*</span>
    {% endif -%}
    {%- if field.schema.hint -%}
      <i class="form-input__hint-icon">
        {{ svg_icon('info_icon') }}
      </i>
    {% endif -%}
  </label>
{% endif -%}

{{ field.serialize(cstruct, has_label=has_label) }}

{%- if field.error and not field.widget.hidden -%}
  <ul class="form-input__error-list">
  {# Only show the first error message for each field. #}
  {# https://github.com/hypothesis/product-backlog/issues/581 #}
  {% for msg in field.error.messages()[0:1] -%}
    {%- set errstr = 'error-%s' % field.oid -%}
    {%- set pid = (loop.index0==0 and errstr) or ('%s-%s' % (errstr, loop.index0)) -%}
    <li class="form-input__error-item" id="{{ pid }}">{{ _(msg) }}</li>
  {% endfor -%}
  </ul>
{% endif -%}

{%- if not field.widget.hidden -%}
</div>

{% if field.schema.hint %}
<div class="form-input__hint" id="hint-{{ field.oid }}">{{ field.schema.hint }}</div>
{% endif %}

{% endif -%}
